<template>
  <div class="max-w-4xl mx-auto p-4">
    <a-card>
      <a-typography-title :level="2">文本反转工具</a-typography-title>
      
      <a-form layout="vertical">
      <!-- 输入区域 -->
        <a-form-item>
          <a-textarea
            v-model:value="inputText"
          placeholder="请输入要反转的文本..."
            :rows="6"
            :auto-size="{ minRows: 6, maxRows: 12 }"
            class="font-mono"
          />
        </a-form-item>

        <!-- 反转选项 -->
        <a-form-item label="反转模式">
          <a-radio-group v-model:value="mode" button-style="solid">
            <a-radio-button value="char">字符反转</a-radio-button>
            <a-radio-button value="word">单词反转</a-radio-button>
            <a-radio-button value="line">行反转</a-radio-button>
          </a-radio-group>
        </a-form-item>

        <!-- 说明文字 -->
        <div class="mb-4 text-gray-500">
          <p v-if="mode === 'char'">- 字符反转：反转所有字符的顺序</p>
          <p v-if="mode === 'word'">- 单词反转：保持单词内字符顺序，反转单词顺序</p>
          <p v-if="mode === 'line'">- 行反转：保持每行内容不变，反转行的顺序</p>
      </div>

      <!-- 操作按钮 -->
        <a-form-item>
          <a-space>
            <a-button type="primary" @click="reverseText" :disabled="!inputText">
          反转文本
            </a-button>
            <a-button @click="clearText" :disabled="!inputText">
              清空
            </a-button>
          </a-space>
        </a-form-item>

      <!-- 结果区域 -->
        <template v-if="outputText">
          <a-divider>处理结果</a-divider>
          <a-space direction="vertical" class="w-full">
            <div class="flex justify-end">
              <a-tooltip :title="copied ? '已复制！' : '复制到剪贴板'">
                <a-button
                  type="text"
            @click="copyToClipboard"
                  :icon="copied ? h(CheckOutlined) : h(CopyOutlined)"
                >
                  {{ copied ? '已复制' : '复制' }}
                </a-button>
              </a-tooltip>
        </div>
            <a-card class="w-full bg-gray-50">
              <pre class="font-mono whitespace-pre-wrap break-all">{{ outputText }}</pre>
            </a-card>
          </a-space>
        </template>
      </a-form>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref, h } from 'vue';
import { CopyOutlined, CheckOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';

const inputText = ref('');
const outputText = ref('');
const mode = ref<'char' | 'word' | 'line'>('char');
const copied = ref(false);

const reverseText = () => {
  if (!inputText.value) {
    message.warning('请输入要反转的文本');
    return;
  }

  switch (mode.value) {
    case 'char':
      outputText.value = inputText.value.split('').reverse().join('');
      break;
    case 'word':
      outputText.value = inputText.value
        .split(/\s+/)
        .filter(word => word.length > 0)
        .reverse()
        .join(' ');
      break;
    case 'line':
      outputText.value = inputText.value
        .split('\n')
        .filter(line => line.length > 0)
        .reverse()
        .join('\n');
      break;
  }

  message.success('反转成功！');
};

const clearText = () => {
  inputText.value = '';
  outputText.value = '';
  message.success('已清空');
};

const copyToClipboard = async () => {
  try {
    await navigator.clipboard.writeText(outputText.value);
    copied.value = true;
    message.success('复制成功！');
    setTimeout(() => {
      copied.value = false;
    }, 2000);
  } catch (err) {
    message.error('复制失败，请重试');
    console.error('复制失败:', err);
  }
};
</script> 

<style scoped>
.ant-card {
  background-color: white;
}

:deep(.ant-card-body) {
  padding: 24px;
}
</style> 